class Details{
    constructor(){
        this.details = $('.details')[0]
        // ul
        this.ul = $('.Small-img>ul')[0]
        // 小盒子
        this.img = $('.big-img')[0]
       
        // 大盒子
        this.big = $('.big-big-img')[0]
        // console.log(this.big)
        
        this.h3 = $('.detailed>h3')[0]
        this.money = $('.discount>b')[0]
        this.price = $('.discount>span')[0]
        this.num = $('.num>dd')[1]
        // console.log(this.num)
        this.val = $('.val')[0]
        this.btn = $('.buy>input')[1]
        // console.log(this.btn)
        this.cou = $('.count')[0]

        this.nu = $('.nu')[0]
       this.sizes = $('.size')[0]
        // console.log(this.sizes)
        this.init()
    }
    init(){
        this.request()
        this.number()
        // this.goCart()
        this.addCart()
        this.size()
        this.cartRender()
        
    }

    addCart(id,data){
        this.btn.onclick = ()=>{
            // console.log(this.btn.value);

            let goods = data.find(item => { return item.goods_id == id })
                let list = JSON.parse(localStorage.getItem('cart')) || []
                // console.log(goods);
                if(!list.length){
                    // console.log(1)
                    goods.cart_number += this.val.value - 0
                    // console.log(goods); 
                    list.push(goods)
                }else{
                    // console.log(2);
                    // console.log(list);
                    let res = list.some(item=>{return item.goods_id == id})
                    // console.log(res);
                    if(res){
                        let index = list.findIndex(item=>{return item.goods_id == id})
                        list[index].cart_number += this.val.value-0
                    }else{
                        goods.cart_number += this.val.value-0
                        list.push(goods)
                        
                     }
                }
                localStorage.setItem('cart',JSON.stringify(list))
                this.cartRender()
            }
            
    }
    // 渲染
    cartRender(){
        let list = JSON.parse(localStorage.getItem('cart')) || []
        // console.log(list);

        let num = 0
        list.forEach(item=>{
            num += item.cart_number
            // console.log(item.cart_number); 
        })
            this.cou.innerHTML = ''
            this.nu.innerHTML = ''
            this.cou.innerHTML = num
            this.nu.innerHTML = num
    }
    
    // 数量加减
    number(){
        this.num.onclick = (e)=>{
            let target = e.target || e.srcElement
            // console.log(1)
            if(target.className =='add'){
                if(this.val.value == 10){
                    alert('亲，只能购买这么多哦!')
                    return false
                }
                this.val.value++
                
            }
            if(target.className =='del'){
                if(this.val.value == 1){
                    
                    return false
                }
                this.val.value--
                
            }
        }
    }
    size(){
        this.sizes.onclick = function(e){
            let target = e.target || e.srcElement
            console.log(target.tagName);
            if(target.tagName == 'LI'){
                $('li').addClass('bor').siblings().removeClass('bor')
                target.className = 'bor'
            }
        }
    }


    getQueryStr(id){
        let str = location.search.slice(1)
        let arr = str.split('&')
        let obj = {}
        arr.forEach(item=>{
            let newArr = item.split('=')
            obj[newArr[0]] = newArr[1] 
        })
        return obj[id]
    }
    request(){
        let id = this.getQueryStr('id') - 0
        if(!id){
            // location.href = '../index.html'
            return false
        }else{
            
            // $.get('../data/goods.json', 'json')
            $.ajax({
                url: '../data/goods.json',   // 必填，请求的地址
                type: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写）
                dataType: 'json',   // 选填，期望返回值的数据类型，默认是 string
            })
            .then(res=>{
                // console.log(res)
                // let data = JSON.parse(res)
                // console.log(data)
                let data = res.slice(0, 50)
                this.render(id, data)
                this.addCart(id,data)
                // console.log(id,data)
            })
        }
    }
    render(id, data){
        console.log(data)
        let res = data.find(item=>{return item.goods_id == id})
        this.ul.innerHTML =`
        <li><img src="${res.img_small_logo}" alt=""></li>
        <li><img src="${res.img_small_logo}" alt=""></li>
        <li><img src="${res.img_small_logo}" alt=""></li>
        <li><img src="${res.img_small_logo}" alt=""></li>
        <li><img src="${res.img_small_logo}" alt=""></li>
        <li><img src="${res.img_small_logo}" alt=""></li>
        `
        this.img.innerHTML =`
        <img src="${res.img_big_logo}" alt="" class="show">
        <img src="${res.img_big_logo}" alt="">
        <img src="${res.img_big_logo}" alt="">
        <img src="${res.img_big_logo}" alt="">
        <img src="${res.img_big_logo}" alt="">
        <img src="${res.img_big_logo}" alt="">
        <span></span>
        `
        this.big.innerHTML =`
        <img src="${res.img_big_logo}" alt="" class="show">
        <img src="${res.img_big_logo}" alt="">
        <img src="${res.img_big_logo}" alt="">
        <img src="${res.img_big_logo}" alt="">
        <img src="${res.img_big_logo}" alt="">
        <img src="${res.img_big_logo}" alt="">
        `
        this.h3.innerHTML = res.title
        this.money.innerHTML = res.current_price
        this.price.innerHTML = '参考价格：￥' + res.price
        this.details.innerHTML = res.goods_introduce
        this.option()
    }


    
    // count(){
    //     let  res = JSON.parse(localStorage.getItem('cart')) || []
    //     let num = 0
    //     // console.log(res);
    //     // res.forEach(item=>{
    //         num += res.cart_number
    //     // })
    //     this.cou.innerHTML = num
        
    // }

    option(){
         // span
         let span = $('.big-img>span')[0]
         console.log(span)
        // 大盒子图片
         let pic = document.querySelectorAll('.big-big-img>img')
        // console.log(this.pic)
        // li图片
        let li = document.querySelectorAll('.Small-img>ul>li')
        // console.log(this.li)
		let smallImg = document.querySelectorAll('.big-img>img')
        let small = $('.big-img')[0]
        let bigs = $('.big-big-img')[0]
      
        function op(){

            for(let i=0;i<li.length;i++){
               
				li[i].onclick = ()=>{
				
					for(let j=0; j<li.length; j++){
                    pic[j].className = ''
                    smallImg[j].className = ''
                }
				smallImg[i].className = 'show'
				pic[i].className = 'show'
                }
            
				}
                small.onmouseover = ()=>{
                    //console.log(that)
                    span.style.display = 'block'
                    bigs.style.display = 'block'
                }

                small.onmouseout = ()=>{
                    //console.log(that)
                    span.style.display = 'none'
                    bigs.style.display = 'none'
                }
                small.onmousemove = (e)=>{
                    e = e || window.event
                    //获取鼠标坐标
                    let x = e.pageX - small.offsetParent.offsetLeft - span.offsetWidth/2 -80
                    let y = e.pageY - small.offsetParent.offsetTop - span.offsetHeight/2 
                    //边界值判断
                    if(x<=0){
                        x = 0
                    }else if(x>=small.offsetWidth - span.offsetWidth){
                        x = small.offsetWidth - span.offsetWidth
                    }
                    if(y<=0){
                        y = 0
                    }else if(y>=small.offsetHeight - span.offsetHeight){
                        y = small.offsetHeight - span.offsetHeight
                    }
                    //进行赋值
                    span.style.left = x + 'px'
                    span.style.top = y + 'px'
                    //计算比例
                    let w = x / (small.offsetWidth - span.offsetWidth)
                    let h = y / (small.offsetHeight - span.offsetHeight)
                    //给大图进行赋值操作
                    for(let k=0;k<pic.length;k++){
                        pic[k].style.left = -w * (pic[k].offsetWidth - bigs.offsetWidth) + 'px'
                        pic[k].style.top = -h * (pic[k].offsetHeight - bigs.offsetHeight) + 'px'
				}
                    // this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
                    // this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'
                }
        }
        op()
    }
    
}

new Details()